<template>
    <div>

        <!-- 筛选查询 -->
        <div class="list">
            <div>
                <img class="list-img" src="../../../assets/images/搜索小.png" alt="">
            </div>
            <div>
                筛选查询
            </div>
        </div>
        <div class="search">
            <div class="search">


                <div class="whead">
                    <div>用户ID:</div>
                    <el-input v-model="input" style="width: 240px;" placeholder="用户ID"></el-input>
                </div>
                <div class="whead">
                    <div>用户手机号:</div>
                    <el-input v-model="input" style="width: 240px;" placeholder="用户手机号"></el-input>
                </div>
                <div class="whead">
                    <div>注册时间:</div>
                    <el-date-picker v-model="value1" style="width: 240px;" prefix-icon="el-icon-time" type="date"
                        placeholder="选择日期">
                    </el-date-picker>

                </div>
            </div>

            <div style="display: flex; height: 40px; margin-left: 100px;">
                <el-button type="primary">搜索</el-button>
                <el-button type="primary">添加用户</el-button>
                <el-button   style='float:right;margin:7px 10px 0 0 '
                    size="mini" type="info" icon="el-icon-document" @click='exportToExcel'>导出xlsx文件</el-button>



            </div>

        </div>
        <!-- 数据列表 -->
        <div class="list">
            <div>
                <img class="list-img" src="../../../assets/images/查询数据列表.png" alt="">
            </div>
            <div>
                数据列表
            </div>
        </div>
        <div>
            <div>
                <el-table :data="tabledata" border style="width:100%" @selection-change="selRow" ref="multipleTable"
                    :row-key="getRowKeys">
                    <el-table-column type="selection" min-width="55" align="center" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column prop="id" label="用户ID" min-width="120" align="center"></el-table-column>
                    <el-table-column prop="num" label="用户昵称" min-width="120" align="center"></el-table-column>
                    <el-table-column prop="name" label="手机号" min-width="200" align="center"></el-table-column>
                    <el-table-column prop="time" label="注册时间" min-width="200" align="center"></el-table-column>
                    <el-table-column prop="pey" label="消费金额" min-width="200" align="center"></el-table-column>
                    <el-table-column prop="fish" label="可用鱼米" min-width="200" align="center"></el-table-column>
                    <el-table-column label="操作" min-width="300" align="center">
                        <el-button type="primary">查看</el-button>
                        <el-button type="primary">编辑</el-button>
                        <el-button type="primary">禁用</el-button>
                        <el-button type="primary">解除禁用</el-button>
                        <el-button type="danger">删除</el-button>


                    </el-table-column>
                </el-table>
            </div>
            <div style="display: flex; justify-content: space-between; margin: 0 15px;">

                <el-checkbox label="全选" :indeterminate="isIndeterminate" v-model="checkAll" @change="selAll()">
                </el-checkbox>
                <el-pagination @size-change="handlePageSize" @current-change="handleCurrentPage"
                    :current-page="currentPage" :page-sizes="[3, 5]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" background>
                </el-pagination>
            </div>

        </div>

    </div>

</template>
 
<script>

// import CommonTable from "@/components/Table/index.vue";
export default {
    data() {
        return {
            input: '', //搜索
            value1: '', //日期选择
            loading: false,

            selectedAssetsList: [], // 该数组对象
            assetsUidList: [], // 下标值
            currentPage: 1, //当前页数
            pageSize: 3, //每页条数
            total: 8, //总条目数
            isIndeterminate: false, // 对el-checkbox控制不完整的全选状态
            checkAll: false, // 对el-checkbox控制全选状态
            tabledata: [],
            newTabledata: [
                // el-table的数据内容
                {
                    id: 1,
                    num: '20210001',
                    name: '小明',
                    time: '2021-01-10',
                    pey: '99',
                    fish: '1000',
                },
                { id: 2, num: '20210003', name: '打发', time: '2019-10-14' },
                {
                    id: 3,
                    num: '20210002',
                    name: '花花',
                    time: '2021-01-10',
                    pey: '99',
                    fish: '1000',
                },
                {
                    id: 4,
                    num: '201903123350',
                    name: '的飞洒',
                    time: '2019-10-16',
                    pey: '99',
                    fish: '1000',
                },
                {
                    id: 5,
                    num: '201903123345',
                    name: '撒打发',
                    time: '2019-10-10',
                    pey: '99',
                    fish: '1000',
                },
                { id: 6, num: '201903123346', name: '供应商推荐', time: '2019-10-14' },
                {
                    id: 7,
                    num: '201903123348',
                    name: '企鹅窝若',
                    time: '2019-10-15',
                    pey: '99',
                    fish: '1000',
                },
                {
                    id: 8,
                    num: '201903123350',
                    name: '很多个',
                    time: '2019-10-16',
                    pey: '99',
                    fish: '1000',
                }
            ]

        }
    },
    mounted() {
        this.search()
    },
    methods: {
        exportToExcel() {
        //excel数据导出
        import('../../../vendor/Export2Excel').then(excel => {
            const tHeader = ['序号', '昵称', '姓名','时间','鱼米','价格','没了'];   // 上面设置Excel的表格第一行的标题
                const filterVal = ['fish', 'id', 'name','num','pey','time']; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = this.newTabledata;
          
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
          })
         
        })
      },
   
      formatJson(filterVal, jsonData) {
       
          return jsonData.map(v => filterVal.map(j => v[j]))
      },

      
        // 获取row的key值
        getRowKeys(row) {
            return row.id
        },
        // 每页条数
        handlePageSize(pageSize) {
            this.pageSize = pageSize
            this.search()
        },
        // 当前页
        handleCurrentPage(currentPage) {
            this.currentPage = currentPage
            this.search()
        },
        search() {
            this.tabledata = this.newTabledata.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        },
     
        // 全选按键功能实现
        selAll() {
           
            if (this.$refs.multipleTable.selection.length < this.newTabledata.length) {
                // 判断勾选的数据是否是 大于 全选的数据  ，如果 小于则 让 全选 等于 true 否则为 false
                this.checkAll = true
            } else {
                this.checkAll = false
            }
            if (this.checkAll) {
                this.newTabledata.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row, true)
                })
            } else {
                this.$refs.multipleTable.clearSelection()
                this.selectedAssetsList = []
                this.assetsUidList = []
            }
        },
        stateChange() {
            var vm = this
            if (vm.assetsUidList.length < this.newTabledata.length && vm.assetsUidList.length > 0) {
                this.isIndeterminate = true
            } else if (vm.assetsUidList.length === this.newTabledata.length) {
                this.isIndeterminate = false
                this.checkAll = true
            } else if (vm.assetsUidList.length === 0) {
                this.isIndeterminate = false
                this.checkAll = false
            }
        },
        // 表格内checkbox触发的全选按钮状态变化
        selRow(val) {
            const vm = this
            // 选择的行的完整数据。
            vm.selectedAssetsList = Array.from(new Set([...vm.selectedAssetsList, ...val]))
            const currentArr = val.map(item => item.id)
            const arr1 = [...vm.assetsUidList, ...currentArr]
            vm.assetsUidList = Array.from(new Set(arr1))
            const tableData = vm.tabledata.map(item => item.id)
            const difference = tableData.filter(v => !currentArr.includes(v))
            difference.forEach(item => {
                if (vm.assetsUidList.indexOf(item) !== -1) {
                    vm.assetsUidList.splice(vm.assetsUidList.indexOf(item), 1)
                }
            })
            // 把选中的行数据进行去重。
            var list = vm.selectedAssetsList.filter(item => vm.assetsUidList.indexOf(item.id) !== -1)
            for (var i = 0; i < list.length; i++) {
                for (var j = i + 1; j < list.length; j++) {
                    if (list[i].id === list[j].id) {
                        list.splice(j, 1)
                        j--
                    }
                }
            }
            setTimeout(() => {
                this.stateChange()
            }, 0)
        }
    }

};
</script>

<style lang="scss" scoped>
.list {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    background-color: #f3f3f3;
    color: #666;

    .list-img {
        width: 20px;
        height: 20px;
    }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1abc9c !important;
    color: #FFF;
}

.search {
    display: flex;
    align-items: center;
    height: 80px;
    line-height: 80px;
    margin: 0 20px;

}

.whead {
    width: 400px;
    display: -webkit-box;
}

::v-deep .el-input__inner {

    // width: 240px;
}
</style>